@* There is a wall of text here, but don't be intimidated! In most cases all you will need is a single tag helper usage
   like <vue-component-app name="resource-name" model="@myData">. You can see an example in /Views/QrCard/Index.cshtml of
   that. The rest of this file will give you insight on the extended features of the app tag helper. *@

@* This is the same you've just seen in Index.cshtml, but using the <vue-component-app> tag helper. This is specifically
   for when your app only has one top level component (sometimes referred to as a "root component" or "app component")
   and all the app does is JSON serializes a data component and binds it to this app. This way you don't need to create
   a boilerplate container HTML or script. If you want to add additional logic it's still possible but the basic data
   holder app is automatically created for you. *@

@* The "area" is optional if the vue file is in the same module as the current file, so it works much like passing an
   "area" to the URL helper.

   The "name" is the only required attribute. It should be the same as the .vue file's name without the extension and
   the resource name in ResourceManagementOptionsConfiguration.cs when child components are used.

   The "id" will be the wrapper element's ID, the application is mounted to this element. If not provided, one is
   generated from the root component name and a random GUID.

   The "class" is just passed to the wrapper element as regular HTML "class" attribute.

   The "model" is turned into JSON and becomes the "viewModel" data property of the app. It's immediate properties are
   also bound to the target component's properties so only include what it needs. The serialization uses the camelCase
   naming strategy. If the model contains "value" or "modelValue" properties, these are two-way bound.

   Make sure to add "@addTagHelper *, Lombiq.VueJs" to your /Views/_ViewImports.cshtml so this tag helper will work. *@
<vue-component-app area="@FeatureIds.Area"
                   name="@ResourceNames.DemoSfc"
                   id="demoApp"
                   class="additional-class-for-styling"
                   model="@(new { ModelValue = 10 })" />

@* If you are using Liquid, you can duplicate the above like this:
    {% capture my_model %}{ modelValue: 10 }{% endcapture %}
    {% assign model_json = my_model | jsonparse %}

    {% helper "vue-component-app", area:"Lombiq.VueJs.Samples", name:"demo-sfc", id:"demoApp", class:"additional-class-for-styling", model:model_json %}

  Note the difference in the model, the Liquid version uses camelCase "modelValue". This is because the built-in JSON
  serializer doesn't alter the names of JSON object properties the way it does with C# objects. *@

@* Below is an example of interacting with your Vue app from JavaScript. This is rarely needed, usually only if you want
   to dynamically send data from a non-Vue app. Here a  button and its JS event handler is the stand-in for such an app.
   This is not a practical example, because if you just want to put a piece of the Vue app outside of its main container
   you should use Vue's "Teleport" feature. *@

<button id="random" class="btn btn-primary" type="button">@T["Pick Random!"]</button>

@* The application is created in a JS module and JS modules are always async. So you can't use the depends-on to
   control execution order. To avoid problems, either put any code that interacts with a Vue app in event handlers or
   wrap them in retry logic that polls for  *@
<script at="Foot">
    @* This is the same as before except we call it "modelValue" instead of "count" to match the component prop name. *@
    document.getElementById('random').addEventListener('click', function () {
        @* The initializer script automatically creates the "window.VueApplications" object. Every time a Vue app is
           created with <vue-component-app> a new property is created; its name is the component ID (in this case
           "demoApp") and the value is the app instance. Apps created with <vue-component-app> also receive a special
           "$appId" property with same value. *@
        const app = window.VueApplications.demoApp;

        @* You can access the SFC itself using the "main" property in $refs like. app.$refs.main if needed. *@
        app.viewModel.modelValue = Math.floor(Math.random() * 10 + 1);
        app.root.setAttribute('data-count', app.viewModel.modelValue);
    });
</script>

@* NEXT STATION: Assets/Scripts/ViewComponents/demo-sfc.vue *@
